<template>
  <el-container class="app">
    <!--2- 把isCollapse  通过属性传入 myslide组件，组件内部控制 menu的折叠状态 -->
    <MyASlide :cos="isCollapse"></MyASlide>
    <el-container direction="vertical">
      <!-- 3- 把isCollapse  通过属性传入 MyHeader组件， 组件内部需要知道这个状态的初始值多少 -->
      <!--3- @cosChnage="cosChnageFn" 监听组件内部 什么时候改变了 折叠状态  -->
      <MyHeader @cosChnage="cosChnageFn" :cos="isCollapse"></MyHeader>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup lang="ts">
import MyASlide from '@/components/MyASlide.vue'
import MyHeader from '@/components/MyHeader.vue'

import { ref } from 'vue'

// 1-状态提升
const isCollapse = ref(false)
function cosChnageFn(cos: boolean) {
  isCollapse.value = cos
  // isCollapse 改变的时候，存入状态
  localStorage.setItem('isCollapse', cos.toString())
}

// 打开页面读取状态
const cosStr = localStorage.getItem('isCollapse')
if (cosStr == 'true') {
  isCollapse.value = true
} else {
  isCollapse.value = false
}
</script>
<style lang="scss" scoped>
.app {
  height: 100vh;
}
</style>
